<template>
    <!-- 营销项目计划管理-公共搜索 -->
    <div>
        <TopFilter
            ref="commonTopFilter"
            :list="topFilterList"
            :cols="3"
            labelWidth="90"
            @filterChange="changeHandle"
            @onCollapse="collapseHandle"
        ></TopFilter>
        <!-- 选择车型 -->
        <BaseDialog
            title="选择车型"
            :visible.sync="visibleDialog"
            width="700px"
            destroyOnClose
            :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
            >
            <infoModal selectType="multiple" @close="selectModelBack" />
        </BaseDialog>
        <!-- 选择方案 -->
        <BaseDialog
            title="选择项目"
            :visible.sync="visibleDialogPro"
            width="700px"
            destroyOnClose
            :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
            >
            <programModal selectType="single" @close="selectModelBackPro" />
        </BaseDialog>
    </div>
</template>

<script>
    import { dictionary } from '@/utils/dictMixin';
    import infoModal  from '@/pages/cms-common/model/indexFilter'
    import programModal  from '../../program/push/select'
    import * as types from '@/api/cms-api/projectOperating/plan/types';
    import { getBigMarketType, getSmallMarketType } from '@/api/cms-api/projectOperating/plan/index';
    export default {
        mixins: [dictionary],
        props:{
            
        },
        components: {
            infoModal,programModal
        },
        mounted() {
            //初始化项目大类
            this.initBigMarketType();
        },
        data(){
            return {
                topFilterList: this.creatTopFilterList(),
                visibleDialog:false,
                visibleDialogPro:false,
                modelIdList:[],
                modelName:"",
                projectProgramId:0 //项目id
            }
        },
        methods:{
            //搜索变更后
            changeHandle(searchData){
                if(!searchData.modal){
                    this.modelIdList = '';
                }
                if(!searchData.projectProgramName){
                    this.projectProgramId = '';
                }
                searchData = Object.assign({'projectProgramId':this.projectProgramId,"modelIdList":this.modelIdList},searchData);    
                this.$emit('filterChange', searchData);
            },
            //搜索展开收起后
            collapseHandle(){
                this.$emit('onCollapse');
            },
            //取项目大类
            async initBigMarketType() {
                let res = [];
                let rd = await getBigMarketType();
                for (let i in rd.data) {
                    res.push({ text: rd.data[i].typeName, value: rd.data[i].typeId });
                }
                this.topFilterList[6].itemList = res;
            },
            //取项目小类
            async initMarketTypeSmall(parentTypeId) {
                let res = [];
                this.dataParams = { parentTypeId: parentTypeId };
                let rd = await getSmallMarketType(this.dataParams);
                for (let i in rd.data) {
                    res.push({ text: rd.data[i].typeName, value: rd.data[i].typeId });
                }
                this.topFilterList[7].itemList = res;
            },
            //车型弹窗打开
            openModelDialog() {
                this.visibleDialog = true;
            },
            //车型清空
            clearSelectModel() {
                //清空数据
                this.modelIdList = '';
                this.modelName ='';
                //清空车型名称
                this.topFilterList.find(item => item.fieldName === 'modal').initialValue='';
            },
            //车型弹窗关闭
            selectModelBack(data) {
                if(data && data.data && typeof(data.data)!=null){
                    //清空数据
                    this.modelIdList = '';
                    this.modelName ='';
                    //循环返回数据
                    data.data.forEach(x => {
                        //使用逗号分隔拼接车型ID
                        if(this.modelIdList==""){
                            this.modelIdList = x.modelId;
                        }else{
                            this.modelIdList += "," + x.modelId;
                        }

                        //使用逗号分隔拼接车型名称
                        if(this.modelName==""){
                            this.modelName = x.modelName;
                        }else{
                            this.modelName += "," + x.modelName;
                        }
                    });

                    //显示车型名称
                    this.topFilterList[5].initialValue = this.modelName;
                }

                this.visibleDialog =false; //关闭弹窗
            },
            //项目弹窗打开
            openModelDialogPro() {
                this.visibleDialogPro = true;
            },
            //项目清空
            clearSelectModelPro() {
                //清空项目id
                 this.projectProgramId = '';
                //清空项目名称
                this.topFilterList.find(item => item.fieldName === 'projectProgramName').initialValue='';
            },
            //项目弹窗关闭
            selectModelBackPro(data) {
                console.log("---data:",data);
                if(data && data.data && typeof(data.data)!=null){
                    this.projectProgramId = data.data[0].projectProgramId;

                    this.topFilterList[8].initialValue = data.data[0].programName;

                }

                this.visibleDialogPro =false; //关闭弹窗
            },
            //创建搜索配置
            creatTopFilterList(){
                return [
                    { type: 'INPUT', label: '项目编号', fieldName: 'planCode', placeholder: '请输入' },
                    { type: 'INPUT', label: '项目名称', fieldName: 'projectName', placeholder: '请输入' },
                    { type: 'RANGE_DATE', label: '项目开始日期', fieldName: 'planStartDate', placeholder: '请输入' },
                    { type: 'RANGE_DATE', label: '项目月份', fieldName: 'activityMonth', dateType: 'monthrange', initialValue: '', placeholder: '请选择' },
                    { type: 'SELECT', label: '项目状态', fieldName: 'planStatus', placeholder: '请选择', 
                        itemList: this.createDictList('2531')},
                    { type: 'INPUT', label: '车型', fieldName: 'modal', placeholder: '请选择',readonly:true,
                        unitRender: () => {
                            return (
                                <div>
                                    <el-button slot="append" icon="el-icon-search" onClick={() =>this.openModelDialog()}></el-button>
                                    <el-button slot="append" icon="el-icon-delete" onClick={() => this.clearSelectModel()}></el-button>
                                </div>
                            );
                        } },
                    { type: 'SELECT',
                        label: '项目大类',
                        fieldName: 'projectMainClass',
                        placeholder: '请选择',
                        initialValue: '',
                        itemList: [],
                        change: value => {
                            this.initMarketTypeSmall(value);
                        }
                    },
                    { type: 'SELECT', label: '项目小类', fieldName: 'projectSmallClass', placeholder: '请选择', initialValue: '', itemList: [] },
                    { type: 'INPUT', label: '项目方案', fieldName: 'projectProgramName', placeholder: '请选择',readonly:true,
                        unitRender: () => {
                            return (
                                <div>
                                    <el-button slot="append" icon="el-icon-search" onClick={() =>this.openModelDialogPro()}></el-button>
                                    <el-button slot="append" icon="el-icon-delete" onClick={() => this.clearSelectModelPro()}></el-button>
                                </div>
                            );
                        } },
                    { type: 'SELECT', label: '合作方式', fieldName: 'cooperationMethod', placeholder: '请选择',  itemList: this.createDictList('2532')},
                ];
            },
        },
    }
</script>

<style scoped>
    
</style>